共计 3915 个字符，预计需要花费 10 分钟才能阅读完成。
工具官网
- Vite：https://cn.vitejs.dev/
- Vue：https://cn.vuejs.org/
- TypeScript：https://www.typescriptlang.org/zh/
项目初始化
pnpm 全称是“performant npm”，即高性能的 npm。pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景，被誉为“最先进的包管理工具”。
安装 pnpm：npm i -g pnpm。
项目初始化：pnpm create vite：
√ Project name: … vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScript
安装依赖：
cd vite-project
pnpm i 运行项目：pnpm run dev。想要运行项目后浏览器自动打开，可修改配置文件 package.json 下的 ”scripts” -> “dev” 为：”vite –open”。
删除默认文件：
- 删除 src\style.css 文件，对应的删除 src\main.ts 里面的
import './style.css' - 删除 src\App.vue 文件里面的代码，替换为自己的代码
- 删除 src\components\HelloWorld.vue 文件
- 删除 src\assets\vue.svg 文件
项目配置
ESLint 配置
ESLint 的目标是提供一个插件化的 JavaScript 代码检测工具，ESLint 中文网：https://eslint.nodejs.cn/
首先安装 eslint：pnpm i eslint -D。
生成配置文件:.eslint.cjs：npx eslint --init：
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you’ve selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · pnpm
.eslint.cjs 文件配置项含义：
- “env”：eslint 工作环境
- “extends”：规则继承
- “overrides”：为特定类型文件指定处理器
- “parserOptions”：指定解析器选项
- “plugins”：给 eslint 安装的插件
- “rules”：eslint 规则
Vue3 环境代码校验插件：pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node @babel/eslint-parser。
修改.eslintrc.cjs 配置文件：
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）*/
rules: {
// eslint（https://eslint.bootcss.com/docs/rules/）'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1}], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为“-”链接的单词
'vue/script-setup-uses-vars': 'error', // 防止 <script setup> 使用的变量 <template> 被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop 的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},在项目根目录下新建.eslintignore 忽略文件：
dist
node_modules添加运行脚本，在 package.json 新增两个运行脚本：
"scripts": {
"lint": "eslint src",
"fix": "eslint src --fix",
}Prettier 配置
ESLint 针对的是 JavaScript，是一个检测工具，包含 JS 语法以及少部分格式问题，在 ESLint 看来，语法对了就能保证代码正常运行，格式问题属于其次。
而 Prettier 属于格式化工具，它看不惯格式不统一，所以就把 ESLint 没干好的事接着干，另外，Prettier 支持包含 JS 在内的多种语言。
总结起来，ESLint 和 Prettier 这俩兄弟一个保证 JS 代码质量，一个保证代码美观。
安装依赖包：pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier。
在项目根目录下创建.prettierrc.json 配置文件，用来添加规则：
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2
}在项目根目录下创建.prettierignore 忽略文件：
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*项目集成
集成 Element Plus
官网：https://element-plus.gitee.io/zh-CN/
安装插件：pnpm i element-plus @element-plus/icons-vue。
Element Plus 组件默认使用英语，如果希望使用中文，需要在入口文件 main.ts 设置为中文：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//@ts-ignore 忽略当前文件 ts 类型的检测，否则有红色提示 (打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
App.use(ElementPlus, {locale: zhCn,})src 别名配置
给 src 文件夹配置一个别名：
// vite.config.ts
import path from 'path'
export default defineConfig({plugins: [vue()],
resolve: {
alias: {'@': path.resolve('./src'), // 使用 @ 代替 src
},
},
})TypeScript 编译配置:
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": {
// 路径映射，相对于 baseUrl
"@/*": ["src/*"]
},
}环境变量配置
项目根目录分别添加开发、生产和测试环境的文件：.env.development、.env.production、.env.test。
